import { Component } from 'react';
import { Checkbox, Icon } from 'tinper-bee';
import FormControl from 'bee-form-control';
import 'bee-form-control/build/FormControl.css';
import Button from 'bee-button';
import 'bee-button/build/Button.css';
import ButtonGroup from 'bee-button-group';
import 'bee-button-group/build/ButtonGroup.css';

import './index.less';
export default class Operation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.searchValue,
            checked: props.isChecked,
        };
    }

    changeCheck = () => {
        let _this = this;
        this.setState({
            checked: !this.state.checked
        }, () => {
            _this.props.toggleChecked(this.state.checked);
        });
    }

    searchTableList = () => {
        this.props.searchTableList({ keyword: this.state.value, activePage: this.props.activePage });
    }

    addItem = () => {
        this.props.addItem();
    }

    onChange = (value) => {
        let inputValue = value.target ? value.target.value : value; // 兼容版本
        this.setState({ value: inputValue });
    }

    reloadPage = () => {
        this.setState({ value: "" }); // 删除后清空搜索关键字
        this.props.reloadData('', '刷新成功！');
    }

    render() {
        let { changeTableEditStatus, saveChange, cancelEdit } = this.props;
        return (
            <div className="milestone">
                <label className="milestone-label fl">里程碑</label>
                <FormControl
                    className="milestone-search fl"
                    value={this.state.value}
                    onChange={this.onChange}
                />
                <Button
                    onClick={this.searchTableList}
                    className="milestone-search-button"
                >
                    <Icon type="uf-search-light-2" />
                </Button>
                <Checkbox
                    className="milestone-checkbox"
                    onChange={this.changeCheck}
                    checked={this.state.checked}>显示停用</Checkbox>
                <ButtonGroup className="milestone-btngroup fr">
                    <Button onClick={this.addItem} className="border-btn-style">新增</Button>
                    <Button onClick={changeTableEditStatus} className={[this.props.editable ? "dn" : "db default-btn-style"]}>修改</Button>
                    <Button onClick={saveChange} className={[this.props.editable ? "db default-btn-style" : "dn"]}>保存</Button>
                    <Button onClick={cancelEdit} className={[this.props.editable ? "db border-btn-style" : "dn"]}>取消</Button>
                    <Button onClick={this.reloadPage} className={this.props.editable ? "dn" : "db btn-refresh"}></Button>
                </ButtonGroup>
            </div>
        );
    }
}
